React Maxsus Hooklari: Qayta foydalanish uchun komponent mantiqini ajratib olish

React hooklari React komponentlarini yozish uslubimizni inqilob qildi, holat va qo'shimcha effektlarni boshqarishning yanada oqlangan va samarali usulini taklif etdi. Mavjud bo'lgan turli hooklar orasida maxsus hooklar komponent mantiqini ajratib olish va qayta ishlatish uchun kuchli vosita sifatida ajralib turadi. Ushbu maqola React maxsus hooklarini tushunish va joriy etish bo'yicha keng qamrovli qo'llanmani taqdim etadi, bu sizga yanada qo'llab-quvvatlanadigan, testlanadigan va kengaytiriladigan ilovalar yaratish imkonini beradi.

React Maxsus Hooklari nima?

Mohiyatan, maxsus hook bu nomi "use" bilan boshlanadigan va boshqa hooklarni chaqira oladigan JavaScript funksiyasidir. U sizga komponent mantiqini qayta ishlatiladigan funksiyalarga ajratib olish imkonini beradi, shu bilan kod takrorlanishini bartaraf etadi va toza komponent tuzilishini rag'batlantiradi. Oddiy React komponentlaridan farqli o'laroq, maxsus hooklar hech qanday UI (foydalanuvchi interfeysi)ni render qilmaydi; ular shunchaki mantiqni o'z ichiga oladi.

Ularni React holati va hayotiy sikl xususiyatlariga kira oladigan qayta ishlatiladigan funksiyalar deb o'ylang. Ular turli komponentlar o'rtasida holatli mantiqni almashishning ajoyib usuli bo'lib, ko'pincha o'qilishi va saqlanishi qiyin bo'lgan kodga olib keladigan yuqori tartibli komponentlar (higher-order components) yoki render props'larga murojaat qilmasdan buni amalga oshirishga imkon beradi.

Nima uchun Maxsus Hooklardan foydalanish kerak?

Maxsus hooklardan foydalanishning afzalliklari juda ko'p:

• Qayta foydalanish imkoniyati: Mantiqni bir marta yozing va uni bir nechta komponentlarda qayta ishlating. Bu kod takrorlanishini sezilarli darajada kamaytiradi va ilovangizni yanada qo'llab-quvvatlanadigan qiladi.
• Kodning yaxshilangan tartibi: Murakkab mantiqni maxsus hooklarga ajratib olish komponentlaringizni tozalaydi, ularni o'qish va tushunishni osonlashtiradi. Komponentlar o'zlarining asosiy render qilish mas'uliyatlariga ko'proq e'tibor qaratadilar.
• Yaxshilangan testlanuvchanlik: Maxsus hooklarni alohida testlash oson. Siz hook mantiqini komponentni render qilmasdan test qilishingiz mumkin, bu esa yanada mustahkam va ishonchli testlarga olib keladi.
• Oshirilgan qo'llab-quvvatlanuvchanlik: Mantiq o'zgarganda, siz uni ishlatiladigan har bir komponentda emas, balki faqat bir joyda – maxsus hookda yangilashingiz kerak bo'ladi.
• Andoza kodining kamayishi: Maxsus hooklar umumiy naqshlar va takrorlanuvchi vazifalarni o'z ichiga olishi mumkin, bu esa komponentlaringizda yozishingiz kerak bo'lgan andoza kodi miqdorini kamaytiradi.

Birinchi Maxsus Hookingizni yaratish

Keling, maxsus hook yaratish va undan foydalanishni amaliy misol bilan ko'rib chiqamiz: API'dan ma'lumotlarni olish.

Misol: useFetch - Ma'lumotlarni olish uchun Hook

Tasavvur qiling, siz React ilovangizda tez-tez turli API'lardan ma'lumotlarni olishingiz kerak. Har bir komponentda ma'lumot olish mantiqini takrorlash o'rniga, siz useFetch hookini yaratishingiz mumkin.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP xatosi! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Avvalgi xatoliklarni tozalash
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('So\'rov bekor qilindi');
        } else {
          setError(error);
        }
        setData(null); // Avvalgi ma'lumotlarni tozalash
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Komponent o'chirilganda yoki URL o'zgarganda so'rovni bekor qilish uchun tozalash funksiyasi
    };
  }, [url]); // URL o'zgarganda effektni qayta ishga tushirish

  return { data, loading, error };
}

export default useFetch;

Tushuntirish:

• Holat o'zgaruvchilari: Hook ma'lumotlar, yuklanish holati va xatolik holatini boshqarish uchun useState'dan foydalanadi.
• useEffect: useEffect hooki url prop o'zgarganda ma'lumotlarni olishni amalga oshiradi.
• Xatoliklarni qayta ishlash: Hook ma'lumotlarni olish jarayonida yuzaga kelishi mumkin bo'lgan xatoliklarni ushlash uchun xatoliklarni qayta ishlashni o'z ichiga oladi. Javob muvaffaqiyatli ekanligiga ishonch hosil qilish uchun status kodi tekshiriladi.
• Yuklanish holati: loading holati ma'lumotlar hali ham olinayotganligini ko'rsatish uchun ishlatiladi.
• AbortController: Komponent o'chirilganda yoki URL o'zgarganda so'rovni bekor qilish uchun AbortController API'sidan foydalanadi. Bu xotira oqishining oldini oladi.
• Qaytariladigan qiymat: Hook data, loading va error holatlarini o'z ichiga olgan obyektni qaytaradi.

Komponentda useFetch Hookidan foydalanish

Endi, bu maxsus hookni React komponentida qanday ishlatishni ko'rib chiqaylik:

import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Foydalanuvchilar yuklanmoqda...</p>;
  if (error) return <p>Xatolik: {error.message}</p>;
  if (!users) return <p>Foydalanuvchilar topilmadi.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

Tushuntirish:

• Komponent useFetch hookini import qiladi.
• U hookni API URL manzili bilan chaqiradi.
• U qaytarilgan obyektni destrukturizatsiya qilib, data (users deb o'zgartirilgan), loading va error holatlariga kirish huquqiga ega bo'ladi.
• U loading va error holatlariga qarab turli tarkibni shartli ravishda render qiladi.
• Agar ma'lumotlar mavjud bo'lsa, u foydalanuvchilar ro'yxatini render qiladi.

Ilg'or Maxsus Hook Naqshlari

Oddiy ma'lumotlarni olishdan tashqari, maxsus hooklar murakkabroq mantiqni o'z ichiga olish uchun ishlatilishi mumkin. Mana bir nechta ilg'or naqshlar:

1. useReducer yordamida holatni boshqarish

Murakkabroq holatni boshqarish stsenariylari uchun siz maxsus hooklarni useReducer bilan birlashtirishingiz mumkin. Bu sizga holat o'tishlarini yanada bashorat qilinadigan va tartibli tarzda boshqarish imkonini beradi.

import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

Foydalanish:

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Hisob: {count}</p>
      <button onClick={increment}>Oshirish</button>
      <button onClick={decrement}>Kamaytirish</button>
    </div>
  );
}

export default Counter;

2. useContext bilan Kontekst Integratsiyasi

Maxsus hooklar React Kontekstiga kirishni soddalashtirish uchun ham ishlatilishi mumkin. Komponentlaringizda useContext'ni to'g'ridan-to'g'ri ishlatish o'rniga, kontekstga kirish mantiqini o'z ichiga olgan maxsus hook yaratishingiz mumkin.

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Sizda ThemeContext bor deb taxmin qilinadi

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

Foydalanish:

import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>Bu mening komponentim.</p>
      <button onClick={toggleTheme}>Mavzuni o'zgartirish</button>
    </div>
  );
}

export default MyComponent;

3. Debouncing va Throttling

Debouncing va throttling - bu funksiyaning bajarilish tezligini nazorat qilish uchun ishlatiladigan usullar. Maxsus hooklar ushbu mantiqni o'z ichiga olish uchun ishlatilishi mumkin, bu esa ushbu usullarni hodisalarni qayta ishlovchilarga qo'llashni osonlashtiradi.

import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Foydalanish:

import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // 500ms davomida kechiktirish (debounce)

  useEffect(() => {
    // debouncedSearchValue yordamida qidiruvni amalga oshirish
    console.log('Qidirilmoqda:', debouncedSearchValue);
    // console.log'ni o'zingizning haqiqiy qidiruv mantiqingiz bilan almashtiring
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Qidirish..."
    />
  );
}

export default SearchInput;

Maxsus Hooklarni Yozish uchun Eng Yaxshi Amaliyotlar

Maxsus hooklaringiz samarali va qo'llab-quvvatlanadigan bo'lishini ta'minlash uchun ushbu eng yaxshi amaliyotlarga rioya qiling:

• "use" bilan boshlang: Har doim maxsus hooklaringizni "use" prefiksi bilan nomlang. Ushbu qoida React'ga funksiya hooklar qoidalariga rioya qilishini va funksional komponentlar ichida ishlatilishi mumkinligini bildiradi.
• Maqsadli bo'ling: Har bir maxsus hook aniq va maxsus maqsadga ega bo'lishi kerak. Juda ko'p mas'uliyatni o'z zimmasiga oladigan o'ta murakkab hooklar yaratishdan saqlaning.
• Foydali qiymatlarni qaytaring: Hookni ishlatayotgan komponentga kerak bo'lgan barcha qiymatlar va funksiyalarni o'z ichiga olgan obyektni qaytaring. Bu hookni yanada moslashuvchan va qayta ishlatiladigan qiladi.
• Xatoliklarni ohista qayta ishlang: Komponentlaringizda kutilmagan xatti-harakatlarning oldini olish uchun maxsus hooklaringizga xatoliklarni qayta ishlashni qo'shing.
• Tozalashni hisobga oling: Xotira oqishining oldini olish va resurslarni to'g'ri boshqarishni ta'minlash uchun useEffect'dagi tozalash funksiyasidan foydalaning. Bu, ayniqsa, obunalar, taymerlar yoki hodisalarni tinglovchilar bilan ishlaganda muhim.
• Testlar yozing: Maxsus hooklaringiz kutilganidek ishlashiga ishonch hosil qilish uchun ularni alohida sinchkovlik bilan testlang.
• Hooklaringizni hujjatlashtiring: Maxsus hooklaringiz uchun ularning maqsadi, ishlatilishi va har qanday potentsial cheklovlarini tushuntiruvchi aniq hujjatlarni taqdim eting.

Global Mulohazalar

Global auditoriya uchun ilovalar ishlab chiqayotganda, quyidagilarni yodda tuting:

• Xalqarolashtirish (i18n) va Mahalliylashtirish (l10n): Agar maxsus hookingiz foydalanuvchiga ko'rinadigan matn yoki ma'lumotlar bilan ishlasa, uni turli tillar va mintaqalar uchun qanday xalqarolashtirilishi va mahalliylashtirilishini o'ylab ko'ring. Bu react-intl yoki i18next kabi kutubxonadan foydalanishni o'z ichiga olishi mumkin.
• Sana va Vaqt Formatlash: Dunyo bo'ylab ishlatiladigan turli sana va vaqt formatlariga e'tibor bering. Sanalar va vaqtlar har bir foydalanuvchi uchun to'g'ri ko'rsatilishini ta'minlash uchun tegishli formatlash funksiyalari yoki kutubxonalaridan foydalaning.
• Valyuta Formatlash: Xuddi shunday, turli mintaqalar uchun valyuta formatlashni mos ravishda bajaring.
• Foydalanish imkoniyati (a11y): Maxsus hooklaringiz ilovangizning foydalanish imkoniyatiga salbiy ta'sir ko'rsatmasligiga ishonch hosil qiling. Nogironligi bo'lgan foydalanuvchilarni hisobga oling va foydalanish imkoniyati bo'yicha eng yaxshi amaliyotlarga rioya qiling.
• Ishlash samaradorligi: Maxsus hooklaringizning potentsial ishlash samaradorligiga ta'sirini, ayniqsa murakkab mantiq yoki katta ma'lumotlar to'plamlari bilan ishlaganda, yodda tuting. Kodingizni turli joylardagi va turli tarmoq tezligiga ega foydalanuvchilar uchun yaxshi ishlashini ta'minlash uchun optimallashtiring.

Misol: Maxsus Hook bilan Xalqarolashtirilgan Sana Formatlash

import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Sanani formatlashda xatolik:', error);
      setFormattedDate('Yaroqsiz sana');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

Foydalanish:

import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>AQSH Sanasi: {enDate}</p>
      <p>Fransuz Sanasi: {frDate}</p>
      <p>Nemis Sanasi: {deDate}</p>
    </div>
  );
}

export default MyComponent;

Xulosa

React maxsus hooklari komponent mantiqini ajratib olish va qayta ishlatish uchun kuchli mexanizmdir. Maxsus hooklardan foydalanib, siz toza, yanada qo'llab-quvvatlanadigan va testlanadigan kod yozishingiz mumkin. React bilan mahoratingiz oshgani sayin, maxsus hooklarni o'zlashtirish murakkab va kengaytiriladigan ilovalar yaratish qobiliyatingizni sezilarli darajada yaxshilaydi. Maxsus hooklarni ishlab chiqishda ularning samarali va turli auditoriya uchun qulay bo'lishini ta'minlash uchun eng yaxshi amaliyotlarga rioya qilishni va global omillarni hisobga olishni unutmang. Maxsus hooklar kuchini qabul qiling va React dasturlash mahoratingizni yangi bosqichga ko'taring!